<template>
  <div>
    <el-row type="flex" align="middle" class="top_row">
      <!-- <h3>修改用户个人信息</h3> -->
      <el-alert title="修改用户个人信息" type="info" center show-icon :closable="false"></el-alert>
    </el-row>
    <el-row>
      <el-card class="pass_card">
        <el-steps :active="Number(active) +1" finish-status="success">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step title="步骤 3"></el-step>
        </el-steps>
        <!-- tabs切换 -->
        <el-tabs
          class="old_"
          @tab-click="stop"
          v-model="active"
          tab-position="left"
          style="height: 200px;"
        >
          <el-tab-pane disabled label="当前用户">
            <el-col class="old_" :span="7">
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="当前用户名" prop="username">
                  <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="当前密码" prop="password">
                  <el-input show-password v-model="ruleForm.password"></el-input>
                </el-form-item>
              </el-form>
              <el-col :push="19">
                <el-button type="primary" @click="confirmed">确 定</el-button>
              </el-col>
            </el-col>
          </el-tab-pane>
          <!-- =============================2 -->
          <el-tab-pane disabled label="校验密码">
            <el-col :span="9">
              <el-form
                :model="ruleForm_pwd"
                ref="ruleForm1"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label-width="120px" label="请输入原密码" prop="oldPassword">
                  <el-input show-password v-model="ruleForm_pwd.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label-width="120px" label="请输入新密码" prop="newPassword">
                  <el-input show-password v-model="ruleForm_pwd.newPassword"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :push="7">
              <el-button type="primary" @click="confirmed_pwd">确 定</el-button>
            </el-col>
          </el-tab-pane>
          <el-tab-pane disabled class="succ_" label="修改成功">修改成功！</el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import Qs from "qs";

export default {
  data() {
    return {
      // 新旧密码比对
      ruleForm_pwd: {},
      active: 0 + "",
      user_info: JSON.parse(window.sessionStorage.getItem("user_pwd")),
      // 表单绑定数据
      ruleForm: {},
      // 表单验证规则
      rules: {
        username: [
          { required: true, message: "请输入当前账户名称", trigger: "blur" },
          { min: 3, message: "长度最少三个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入当前账户密码", trigger: "blur" },
          { min: 3, message: "长度最少三个字符", trigger: "blur" }
        ],

        oldPassword: [
          { required: true, message: "请输入当前账户密码", trigger: "blur" },
          { min: 3, message: "长度最少三个字符", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 3, message: "长度最少三个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    stop() {
      return false;
    },
    // 当前用户名和密码第一次校验
    confirmed() {
      this.$refs.ruleForm.validate(async vali => {
        if (vali) {
          if (
            this.ruleForm.username != this.user_info.username ||
            this.ruleForm.password != this.user_info.password
          ) {
            this.$refs.ruleForm.resetFields();
            return this.$message.error("用户名或密码错误");
          }

          this.active = 1 + "";
        }
      });
    },
    // 校验新旧密码
    async confirmed_pwd() {
      if (this.ruleForm_pwd.oldPassword != this.user_info.password)
        return this.$message.error("原密码输入错误");
      if (this.ruleForm_pwd.oldPassword == this.ruleForm_pwd.newPassword) {
        return this.$message.error("新旧密码一致");
      }
      this.ruleForm_pwd.id = this.$store.state.user_info.data.id;

      var obj = {
        id: this.ruleForm_pwd.id,
        oldPassword: this.$md5(this.ruleForm_pwd.oldPassword),
        newPassword: this.$md5(this.ruleForm_pwd.newPassword)
      };
      let { data: res } = await this.$http.post(
        "/user/updatePassword",
        Qs.stringify(obj)
      );

      if (res.status != 0) return this.$message.error(res.msg);
      this.active = 2 + "";
      setTimeout(() => {
        alert("请重新登录");
        // this.$router.push("/");
        window.sessionStorage.removeItem("token");
        window.location.href = "/";
      }, 1500);
    }
  }
};
</script>

<style lang="less" scoped>
.pass_card {
  padding: 26px;
}
// ================
.top_row {
  height: 60px;
  // background-color: pink;
  border-bottom: 3px dashed #666;
  margin-bottom: 20px;
  // padding: 0px 20px;
  .ali_iconfont {
    margin-left: 20px;
    font-size: 30px;
  }
}
.old_ {
  line-height: 50px;
  .el-form-item {
    padding: 10px 0px;
  }
}
.succ_ {
  font-size: 50px;
  text-align: center;
  line-height: 150px;
}
</style>